<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogStatus"
    width="45%"
    top="5vh"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="conent">
      <div class="seach">
        <el-row>
          <el-col :span="11"
            ><div class="grid-content ep-bg-purple" />
            <el-form-item label="部门" style="margin-left: 20px">
              <el-select
                v-model="id.depid"
                placeholder="请选择"
                @change="chanSele"
              >
                <el-option
                  v-for="item in depList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11"
            ><div class="grid-content ep-bg-purple-light" />
            <el-form-item label="班级" style="margin-left: 20px" v-if="flag">
              <el-select
                v-model="id.classid"
                placeholder="请选择"
                :disabled="datas.id.depid == ''"
                @change="Selclass"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="shuttle">
        <el-transfer
          ref="server"
          v-model="value"
          :props="{
            key: 'id',
            label: 'name',
          }"
          :data="studentList"
          :titles="['未选', '全选']"
          @left-check-change="left"
          @right-check-change="right"
          v-loading="loading"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          @click="
            () => {
              (dialogVisible = false),
                emits('iss', false),
                (datas.id.depid = ''),
                (datas.id.classid = '');
            }
          "
          >取消</el-button
        >
        <el-button type="primary" @click="que">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, reactive, onMounted, toRefs, inject, provide } from "vue";
import { ElMessage } from "element-plus";
// 引入部门列表
import {
  Department,
  Classes,
  Student,
  Teacher,
  Getlimit,
  Getmarkteachers,
  studentList as studentLists
} from "../../apis/test/test";
// 引入班级列表

const datas: any = reactive({
  depList: [],
  classList: [],
  studentList: [],
  selectedStudents: [],
  dialogVisible: false,
  value: [],
  id: { depid: null, classid: null },
  dialogStatus: "",
  flag: false,
  server: null,
  loading: false,
  psize:20
});

const {
  psize,
  depList,
  classList,
  studentList,
  dialogVisible,
  value,
  id,
  dialogStatus,
  flag,
  server,
  loading,
}: any = toRefs(datas);

// 弹出框
const props = defineProps({
  is: {
    type: Boolean,
  },
  stu: {
    type: String,
  },
  testid: {
    type: Number,
  },
});
// watch监听数据变化
let state: any = "";
watch([props], (newValue, oldValue) => {
  dialogVisible.value = props.is;
  state = props.stu;
  // console.log('考试ID',props.testid)
  switch (props.stu) {
    case "学生":
      (datas.dialogStatus = "学生考试列表"), (flag.value = true),students();
      break;
    case "可见":
      (datas.dialogStatus = "可见老师"), (flag.value = false),getlimits();
      break;
    case "阅卷老师":
      (datas.dialogStatus = "阅卷老师"), (flag.value = false),getmarkteacher();
      break;
  }
  down();
});
// 获取学生列表
const students=async ()=>{
   datas.id.classid = "";
  const res:any = await studentLists({testid:props.testid})
  if (res.errCode == 10000) {
    datas.studentList = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
}
// 可见老师默认数据
const getlimits=async ()=>{
   datas.id.classid = "";
  const res:any = await Getlimit({testid:props.testid})
  if (res.errCode == 10000) {
    datas.studentList = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
}
// // 获取考试阅卷老师
const getmarkteacher=async ()=>{
   datas.id.classid = "";
  const res:any  =await Getmarkteachers({testid:props.testid})
    if (res.errCode == 10000) {
      datas.studentList = res.data;
      console.log(datas.studentList)
    } else {
      ElMessage.error(res.errMsg);
    }
}

// 子传父 父定义的emits
const emits = defineEmits(["iss", "stus", "marks", "students", "limitss"]);
// 点击关闭触发的事件
const handleClose = (done: () => void) => {
  done();
  emits("iss", false);
  datas.id.classid = "";
  datas.id.depid = "";
};
// 部门接口
const down = async () => {
  const res: any = await Department();
  if (res.errCode == 10000) {
    datas.depList = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 班级接口
const chanSele = async (e: any) => {
  datas.id.depid = e;
  datas.id.classid = "";
  if (state == "学生") {
    const res: any = await Classes(datas.id.depid);
    if (res.errCode == 10000) {
      datas.classList = res.data.list;
    } else {
      ElMessage.error(res.errMsg);
    }
  }
  if (state == "可见" || state == "阅卷老师") {
    loading.value = true;
    const res: any = await Teacher(datas.id.depid);
    datas.id.classid = "";
    if (res.errCode == 10000) {
      datas.studentList = res.data.list;
    } else {
      ElMessage.error(res.errMsg);
    }
    loading.value = false;
  }
};
// 学生列表
const Selclass = async (e: string) => {
  loading.value = true;
  datas.id.classid = e;
  const res: any = await Student({
    depid: datas.id.depid,
    classid: datas.id.classid,
  });
  // console.log(res)
  if (res.errCode == 10000) {
    datas.studentList = res.data.list;
  } else {
    ElMessage.error(res.errMsg);
  }
  loading.value = false;
};
// 左侧穿梭框
const left = () => {
  server.value.addToRight();
};
// 右侧穿梭框
const right = () => {
  server.value.addToLeft();
};
// 确定
const que = () => {
  dialogVisible.value = false;
  emits("iss", false);
  datas.id.classid = "";
  datas.id.depid = "";
  
  if(state=='学生' === true){
     datas.studentList=[]
  }
   if(state=='阅卷老师' === false){
     datas.studentList=[]
  }
   if(state=='可见' === false){
     datas.studentList=[]
  }

  emits("stus", value.value);
  if (state === "学生") {
    emits("students", value.value);
      
  } else if (state === "阅卷老师") {
    emits("marks", value.value);
  } else if (state === "可见") {
    emits("limitss", value.value);
  }
};
</script>
<style scoped lang="less">
@import url("../../static/css/test/student.css");
</style>